<template>
  <Frame>
    <template #main>
      <PageCard id="pageCard" title="邀请入会">
        <div id="select">
          选择会议：
          <el-select
            v-model="selectedConferenceId"
            placeholder="请选择会议"
            clearable=""
            style="width: 90%"
            class="select"
            @change="
              getConferenceUserList(), getAllUserList(), getConferenceData()
            "
          >
            <el-option
              v-for="conference in conferenceList"
              :label="conference.name"
              :value="conference.id"
              :key="conference.id"
            >
            </el-option>
          </el-select>
          <!-- <el-button type="primary" @click="getConferenceUserList(), getAllUserList()"> 刷新 </el-button> -->
        </div>
        <div id="conferenceCard" class="card">
          <div id="conferenceName">{{ conferenceName }}</div>
          <hr />
          <div id="conferenceData">
            <div id="conferenceAddress">
              会议地址:
              <el-input
                v-model="conferenceAddress"
                disabled
                style="width: 70%"
              />
            </div>
            <div id="conferenceStartTime">
              开始时间:
              <el-date-picker
                v-model="conferenceStartTime"
                style="width: 70%"
                type="datetime"
                disabled
              />
            </div>
            <div id="conferenceEndTime">
              结束时间:
              <el-date-picker
                v-model="conferenceEndTime"
                style="width: 70%"
                type="datetime"
                disabled
              />
            </div>
            <div id="conferenceComm">
              会议描述:
              <br />
              <el-input
                v-model="conferenceComm"
                style="width: 100%"
                :rows="10"
                disabled
                type="textarea"
              />
            </div>
          </div>
        </div>
        <div id="transferCard" class="card">
          <div
            style="display: flex; justify-content: center; align-items: center"
          >
            <el-transfer
              v-model="handleSelectedValue"
              :data="userList"
              :props="{
                key: 'id',
                label: 'name',
              }"
              :titles="['未加入会议人员', '已加入会议人员']"
              :button-texts="['移除会议', '加入会议']"
              @change="change"
              class="custom-transfer"
            >
            </el-transfer>
          </div>
        </div>
      </PageCard>
    </template>
  </Frame>
</template>
  <script>
import axios from "axios";
import Frame from "../components/frame.vue";
import PageCard from "../components/pageCard.vue";
import { baseUrl } from "../main.js";
import { show_success_msg, show_error_msg } from "../js/msg.js";
import { Delete } from "@element-plus/icons-vue";

export default {
  components: {
    Frame,
    PageCard,
    Delete,
  },
  data() {
    return {
      baseUrl: baseUrl,
      selectedConferenceId: "",
      conferenceList: [],
      userList: [],
      conferenceUserList: [],
      handleSelectedValue: [],
      joinUser: [],
      leaveUser: [],
      conferenceName: "会议未选择",
      conferenceAddress: "",
      conferenceStartTime: 0,
      conferenceEndTime: 0,
      conferenceComm: "",
    };
  },
  methods: {
    getConferenceData() {
      if (this.selectedConferenceId == null) {
        return;
      }
      axios
        .get(
          this.baseUrl + "/Conference/findById?id=" + this.selectedConferenceId
        )
        .then((response) => {
          let re_data = response.data;
          if (re_data.status != 200) {
            show_error_msg("获取会议信息失败", re_data.msg);
            return;
          }
          this.conferenceName = re_data.data.name;
          this.conferenceAddress = re_data.data.address;
          this.conferenceStartTime = re_data.data.startTime;
          this.conferenceEndTime = re_data.data.endTime;
          this.conferenceComm = re_data.data.comm;
        });
    },
    getConferenceList() {
      axios
        .get(this.baseUrl + "/Conference/getAllConferenceName")
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            this.conferenceList = re_data.data;
          } else {
            show_error_msg("获取会议失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("获取会议失败", "无法与服务建立连接");
        });
    },
    cleanData() {
      this.userList = [];
      this.conferenceUserList = [];
      this.conferenceName = "会议未选择";
      this.conferenceAddress = "";
      this.conferenceStartTime = 0;
      this.conferenceEndTime = 0;
      this.conferenceComm = "";
    },
    getAllUserList() {
      if (this.selectedConferenceId == null) {
        this.cleanData();
        return;
      }
      axios
        .get(this.baseUrl + "/user/getAllUserName")
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            this.userList = re_data.data;
          } else {
            show_error_msg("获取用户失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("获取用户失败", "无法与服务建立连接");
        });
    },
    getConferenceUserList() {
      if (this.selectedConferenceId == null) {
        return;
      }
      axios
        .get(
          this.baseUrl +
            "/ConferenceDetail/getUserNameByConferenceId?conferenceId=" +
            this.selectedConferenceId
        )
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            this.conferenceUserList = re_data.data;
            this.handleSelectedValue = this.conferenceUserList.map(
              (user) => user.id
            );
          } else {
            show_error_msg("获取参会人员失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("获取参会人员失败", "无法与服务建立连接");
        });
    },
    joinConference() {
      // console.log(this.handleSelectedValue)
      let fromdata = new FormData();
      fromdata.append("conferenceId", this.selectedConferenceId);
      fromdata.append("userId", this.joinUser);
      axios
        .post(this.baseUrl + "/ConferenceDetail/joinConference", fromdata)
        .then((response) => {
          // let re_data = response.data;
          // if (re_data.status == 200) {
          //     show_success_msg("邀请入会成功");
          //     this.getConferenceUserList();
          // } else {
          //     show_error_msg("邀请入会失败", re_data.msg);
          // }
        })
        .catch((error) => {
          show_error_msg("邀请入会失败", "网络异常");
        });
    },
    leaveConference() {
      // console.log(this.handleSelectedValue)
      let fromdata = new FormData();
      fromdata.append("conferenceId", this.selectedConferenceId);
      fromdata.append("userId", this.leaveUser);
      axios
        .post(this.baseUrl + "/ConferenceDetail/leaveConference", fromdata)
        .then((response) => {
          // let re_data = response.data;
          // if (re_data.status == 200) {
          //     show_success_msg("移出会议成功");
          //     this.getConferenceUserList();
          // } else {
          //     show_error_msg("移出会议失败", re_data.msg);
          // }
        })
        .catch((error) => {
          show_error_msg("移出会议失败", "网络异常");
        });
    },
    change() {
      var conferenceUserIdList = this.conferenceUserList.map((user) => user.id);
      for (var i = 0, len = this.handleSelectedValue.length; i < len; i++) {
        if (
          conferenceUserIdList.includes(this.handleSelectedValue[i]) == false
        ) {
          this.joinUser = this.handleSelectedValue[i];
          this.joinConference();
        }
      }
      for (var i = 0, len = this.conferenceUserList.length; i < len; i++) {
        if (
          this.handleSelectedValue.includes(conferenceUserIdList[i]) == false
        ) {
          this.leaveUser = conferenceUserIdList[i];
          this.leaveConference();
        }
      }
    },
  },

  mounted() {
    this.getConferenceList();
  },
};
</script>
  
<style scoped>
#select {
  padding-top: 2vh;
  height: 8vh;
}

#select > * {
  margin-right: 0.8vw;
}

#select > .select {
  width: 20vw;
}

#conferenceCard {
  float: left;
  padding: 2vh;
  width: 31%;
  height: 80%;
}

#conferenceCard > #conferenceName {
  font-size: 2vw;
  font-weight: bold;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 7px;
}

#conferenceData {
  padding: 10px;
  font-size: 1.3vw;
}

#conferenceData > * {
  margin-top: 10px;
}

#transferCard {
  float: right;
  padding: 2vh;
  width: 68%;
  height: 80%;
}

:deep(.el-transfer-panel) {
  width: 15vw; /* 左右两个穿梭框的高度和宽度 */
  height: 100%;
  box-shadow: 1px 1px 5px rgba(99, 99, 99, 0.1);
}

:deep(.el-transfer-panel__body) {
  height: 62vh;
}

:deep(.el-transfer-panel__list) {
  height: 100%;
}

:deep(.el-transfer__button:nth-child(1)) {
  width: 7vw; /* 左右两个穿梭框的高度和宽度 */
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
}
</style>